<template>
  <section class="chart-container">
    <van-sticky class="header" :offset-top="0">
      <van-nav-bar
        title="统计分析"
      >
        <template #left>
          <span @click="onClickLeft" class="fanhui">
            <img src="../../assets/返回.png" alt="">
            <span class="">返回</span>
          </span>
        </template>
        <template #right>
          <span @click="onClickRight" class="sides">
            <img src="../../assets/统计@2x.png" alt="">
            统计
          </span>
        </template>
      </van-nav-bar>
      <div class="columnHeader">
        <van-dropdown-menu active-color="#1DA4F4">
          <van-dropdown-item   @change="onchange" v-model="value1" :options="optionVan" />
        </van-dropdown-menu>
      </div>
      <div class="searchDate">
        <div class="time"><van-field v-model="startTime" @click="StartsearchDate"
                                     placeholder="开始日期" readonly/></div>
        <div class="timegang">至</div>
        <div class="time"><van-field v-model="endTime" @click="endSearchDate" placeholder="结束日期"  readonly/></div>
      </div>
    </van-sticky>
    <div id="chartPie1" class="chartPie" style="width:100vw; height:400px;" v-show="value1 === '0'"></div>
    <div id="chartPie2" class="chartPie" style="width:100vw; height:400px;" v-show="value1 === '1'"></div>
    <div id="chartPie3" class="chartPie" style="width:100vw; height:400px;" v-show="value1 === '2'"></div>
    <div id="chartPie4" class="chartPie" style="width:100vw; height:400px;" v-show="value1 === '3'"></div>
    <div id="chartPie5" class="chartPie" style="width:100vw; height:400px;" v-show="value1 === '4'"></div>
    <div id="chartPie6" class="chartPie" style="width:100vw; height:400px;" v-show="value1 === '5'"></div>
<!--    <div id="chartPie7" class="chartPie" style="width:100vw; height:400px;" v-show="value1 === '6'"></div>-->
    <van-popup round v-model="StartShow" position="bottom" :style="{ height: '50%' }">
      <van-datetime-picker
        v-model="StartcurrentDate"
        type="date"
        title="选择开始时间"
        :min-date="StartminDate"
        :max-date="StartmaxDate"
        @cancel="StartNoDate()"
        @confirm="StartonDateConfirm"
      />
    </van-popup>
    <van-popup round v-model="endShow" position="bottom" :style="{ height: '50%' }">
      <van-datetime-picker
        v-model="endcurrentDate"
        type="date"
        title="选择结束时间"
        :min-date="endminDate"
        :max-date="endmaxDate"
        @cancel="endNoDate()"
        @confirm="endonDateConfirm"
      />
    </van-popup>
  </section>
</template>

<script>
// import $ from 'jquery'
// import axios from 'axios'
import echarts from 'echarts'
export default {
  name: 'Echart',
  data () {
    return {
      chartPie: null,
      StartminDate: new Date(1900, 0, 1),
      StartmaxDate: new Date(),
      StartcurrentDate: new Date(),
      endminDate: new Date(1900, 0, 1),
      endmaxDate: new Date(),
      endcurrentDate: new Date(),
      StartShow: false,
      endShow: false,
      startTime: '', // 开始日期
      endTime: '', // 结束日期
      value1: '0',
      optionVan: [
        {text: '残疾人档案残疾分类人员统计表', value: '0'},
        {text: '残疾人档案年龄段分布统计表', value: '1'},
        {text: '残疾人档案性别分布统计表', value: '2'},
        {text: '残疾人档案文化程度分布统计表', value: '3'},
        {text: '各社区管辖残疾人数统计表', value: '4'},
        {text: '每日新建残疾人档案统计表', value: '5'}
        // {text: '残疾人就业情况统计表', value: '6'}
      ],
      selectOp: '',
      option1: [],
      option2: [],
      option3: [],
      option4: [],
      option5_x: [],
      option5_y: [],
      option6_x: [],
      option6_y: []
    }
  },
  mounted () {
    this.StartcurrentDate = new Date('2019-10-10')
    this.startTime = this.formatDate(this.StartcurrentDate)
    this.endTime = this.formatDate(this.endcurrentDate)
    this.getInfo(this.value1)
  },
  methods: {
    drawPieChart1 () {
      this.chartPie = echarts.init(document.getElementById('chartPie1'))
      var op1 = {
        title: {
          text: '残疾人档案残疾分类人员统计表',
          subtext: '',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: ['#407FFF', '#A682E6', '#E15D68', '#F29961', '#00CCCD', '#000'],
        legend: {
          orient: 'vertical',
          left: 'left',
          data: []
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: this.option1,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.chartPie.setOption(
        op1
      )
    },
    drawPieChart2 () {
      this.chartPie = echarts.init(document.getElementById('chartPie2'))
      var op2 = {
        title: {
          text: '残疾人档案年龄段分布统计表',
          subtext: '',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: ['#407FFF', '#A682E6', '#E15D68', '#F29961', '#00CCCD', '#000'],
        legend: {
          orient: 'vertical',
          left: 'left',
          data: []
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: this.option2,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.chartPie.setOption(
        op2
      )
    },
    drawPieChart3 () {
      this.chartPie = echarts.init(document.getElementById('chartPie3'))
      var op3 = {
        title: {
          text: '残疾人档案性别分布统计表',
          subtext: '',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: ['#407FFF', '#A682E6', '#E15D68', '#F29961', '#00CCCD', '#000'],
        legend: {
          orient: 'vertical',
          left: 'left',
          data: []
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: this.option3,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.chartPie.setOption(
        op3
      )
    },
    drawPieChart4 () {
      this.chartPie = echarts.init(document.getElementById('chartPie4'))
      var op4 = {
        title: {
          text: '残疾人档案文化程度分布统计表',
          subtext: '',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: ['#407FFF', '#A682E6', '#E15D68', '#F29961', '#00CCCD', '#703BCD'],
        legend: {
          orient: 'vertical',
          left: 'left',
          data: []
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: this.option4,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.chartPie.setOption(
        op4
      )
    },
    drawPieChart5 () {
      this.chartPie = echarts.init(document.getElementById('chartPie5'))
      // var op5 = {
      //   title: {
      //     text: '残疾人就业情况统计表',
      //     top: 5,
      //     left: 'center'
      //   },
      //   color: ['#00CCCD', '#E15D68'],
      //   legend: {
      //     data: ['', ''],
      //     top: 30
      //   },
      //   // X轴
      //   xAxis: {
      //     data: this.option5_x
      //     // ['一月', '二月', '三月', '四月', '五月']
      //   },
      //   // Y轴
      //   yAxis: {},
      //   // 数据
      //   series: [
      //     {
      //       name: '社区',
      //       type: 'bar',
      //       data: this.option5_y
      //       // [120, 100, 440, 320, 150]
      //     }
      //   ]
      // }
      var op5 = {
        grid: { // 控制图的大小，调整下面这些值就可以，
          // x: 100, // 控制x轴文字与底部的距离
          y2: 200 // y2可以控制倾斜的文字狱最右边的距离，放置倾斜的文字超过显示区域
        },
        xAxis: {
          type: 'category',
          data: this.option5_x,
          axisLabel: {
            interval: 0, // 强制文字产生间隔
            rotate: 30, // 文字逆时针旋转45°
            textStyle: { // 文字样式
              color: 'black',
              fontSize: 16,
              fontFamily: 'Microsoft YaHei'
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.option5_y,
          type: 'bar'
        }]
      }
      this.chartPie.setOption(
        op5
      )
    },
    drawPieChart6 () {
      this.chartPie = echarts.init(document.getElementById('chartPie6'))
      var op6 = {
        grid: { // 控制图的大小，调整下面这些值就可以，
          // x: 100, // 控制x轴文字与底部的距离
          y2: 200 // y2可以控制倾斜的文字狱最右边的距离，放置倾斜的文字超过显示区域
        },
        xAxis: {
          type: 'category',
          data: this.option6_x
          // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.option6_y,
          // [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }]
      }
      this.chartPie.setOption(
        op6
      )
    },
    // drawPieChart7 () {
    //   this.chartPie = echarts.init(document.getElementById('chartPie7'))
    //   var op7 = {
    //     title: {
    //       text: '残疾人就业情况统计表',
    //       top: 5,
    //       left: 'center'
    //     },
    //     color: ['#00CCCD', '#E15D68'],
    //     legend: {
    //       data: ['', ''],
    //       top: 30
    //     },
    //     // X轴
    //     xAxis: {
    //       data: [
    //         '一月', '二月', '三月', '四月', '五月'
    //       ]
    //     },
    //     // Y轴
    //     yAxis: {},
    //     // 数据
    //     series: [
    //       {
    //         name: '衣服',
    //         type: 'bar',
    //         data: [120, 100, 440, 320, 150]
    //       },
    //       {
    //         name: '帽子',
    //         type: 'bar',
    //         data: [200, 120, 240, 330, 170]
    //       }
    //     ]
    //   }
    //   this.chartPie.setOption(
    //     op7
    //   )
    // },
    drawCharts () {
      // this.getInfo(this.value1)
      if (this.value1 === '0') {
        this.drawPieChart1()
      } else if (this.value1 === '1') {
        console.log(1)
        this.drawPieChart2()
      } else if (this.value1 === '2') {
        this.drawPieChart3()
      } else if (this.value1 === '3') {
        this.drawPieChart4()
      } else if (this.value1 === '4') {
        this.drawPieChart5()
        console.log(this.value1)
      } else if (this.value1 === '5') {
        this.drawPieChart6()
      }
    },
    // 返回
    onClickLeft () {
      this.$router.history.go(-1)
    },
    // 点击统计
    onClickRight () {},
    // 点击开始时间 时间框展示
    StartsearchDate () {
      this.StartShow = true
      this.endShow = false
    },
    // 点击结束时间 时间框展示
    endSearchDate () {
      this.StartShow = false
      this.endShow = true
    },
    // 开始时间日期选择 取消
    StartNoDate () {
      this.StartShow = false
    },
    // 结束时间日期选择 取消
    endNoDate () {
      this.endShow = false
    },
    // 开始时间获取日期
    StartonDateConfirm (val) {
      this.StartShow = false
      this.startTime = this.formatDate(val)
      if (this.value1 === '4') {
        this.getszjg()
      } if (this.value1 === '5') {
        this.gettianxie()
      } else {
        this.getInfo(this.value1)
      }
    },
    // 结束时间获取日期
    endonDateConfirm (val) {
      this.endShow = false
      this.endTime = this.formatDate(val)
      if (this.value1 === '4') {
        this.getszjg()
      } if (this.value1 === '5') {
        this.gettianxie()
      } else {
        this.getInfo(this.value1)
      }
    },
    // 点击分类
    onchange () {
      if (this.value1 === '4') {
        this.getszjg()
      } if (this.value1 === '5') {
        this.gettianxie()
      } else {
        this.getInfo(this.value1)
      }
      // this.drawCharts()
    },
    // 日期转换
    formatDate (date) {
      // eslint-disable-next-line no-redeclare
      var date = new Date(date)
      var YY = date.getFullYear() + '-'
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      // var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      // var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      // var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return YY + MM + DD
    },
    // http://192.168.3.121:7001/kfhl_statistical_chart/statistic/disability_type
    getInfo (classifyName) {
      this.$http.disability_type({classifyName: classifyName, endTime: this.formatDate(this.endcurrentDate), startTime: this.formatDate(this.StartcurrentDate)})
        .then(res => {
          this.option1 = []
          this.option2 = []
          this.option3 = []
          this.option4 = []
          console.log(res.data.data)
          for (var i = 0; i < res.data.data.length; i++) {
            var obj = {value: res.data.data[i].number, name: res.data.data[i].disability_type}
            if (res.data.data[i].number !== 0) {
              if (this.value1 === '0') {
                this.option1.push(obj)
              } else if (this.value1 === '1') {
                this.option2.push(obj)
              } else if (this.value1 === '2') {
                this.option3.push(obj)
              } else if (this.value1 === '3') {
                this.option4.push(obj)
              }
            }
          }
          // console.log(JSON.stringify(this.option1))
          // this.option1 = JSON.stringify(this.option1)
          this.drawCharts()
        })
        .catch(err => {
          console.log(err)
        })
    },
    getszjg () {
      this.$http.disability_szjg({})
        .then(res => {
          console.log(res)
          this.option5_x = res.data.data.xData
          this.option5_y = res.data.data.yData
          this.drawCharts()
        })
        .catch(err => {
          console.log(err)
        })
    },
    gettianxie () {
      this.$http.disability_tianxie({startTime: this.StartcurrentDate, endTime: this.endcurrentDate})
        .then(res => {
          console.log(res)
          this.option6_x = res.data.data.xData
          this.option6_y = res.data.data.yData
          this.drawCharts()
        })
        .catch(err => {
          console.log(err)
        })
    }
  },
  updated: function () {
    this.drawCharts()
  }
}
</script>
<style scoped>
  .chart-container {
    /*width: 100%;*/
    /*float: left;*/
  }
  #chartPie1,
  #chartPie2,
  #chartPie3,
  #chartPie4,
  #chartPie5,
  #chartPie6,
  #chartPie7 {
    width: 80%;
    height: 300px;
    background: url("../../assets/统计background.png") no-repeat;
    /*background-position: 0 0;*/
    background-size: 100% 100%;
    border-radius: 20px;
  }
  .fanhui{
    display: flex;
    align-items: center;
    color: #1da4f2;
  }
  .fanhui span {
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  .fanhui  img{
    width: 7px;
    height: 13px;
    margin-right: 5px;
  }
  /deep/ .van-nav-bar{
    height: 12vw;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    /*border-bottom: 1px solid rgba(0,0,0,0.1);*/
  }
  /deep/ .van-nav-bar__left, /deep/ .van-nav-bar__title, /deep/ .van-nav-bar__right{
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold !important;
  }
  .sides{
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 15px;
    display: flex;
    align-items: center;
    color: #1DA4F2;
  }
  .sides img{
    width: 22px;
    height: 22px;
    margin-right: 5px;
  }
  .searchDate{
    display: flex;
    height: 12vw;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 2vw;
    /*border: 1px solid;*/
  }
  .searchDate .time{
    width: 34%;
    height: 90%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #999;
    overflow: hidden;
  }
  .timegang{
    color: #e5e5e5;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  /deep/ .searchDate .time .van-field__control{
    text-align: center;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #1DA4F2;
    width: 26vw;
  }
  .columnHeader{
    width: 90%;
    background-color: #ffffff;
    margin: 0 auto;
    position: relative;
    font-family: PingFang SC;
    font-weight: bold;
    /*border-bottom: 1px solid #ededed;*/
    border: 1px solid #ededed;
    border-radius: 20px;
    overflow: hidden;
  }
  /* 下拉菜单单独样式*/
  /deep/ .van-dropdown-menu__bar{
    /*width: 25vw;*/
    box-shadow: none;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  /* 返回下划线取消*/
  /deep/ .van-hairline--bottom::after{
    border: none;
  }
  /*下拉菜单样式更改*/
  /deep/ .van-cell__title, /deep/ .van-cell__value {
    /*-webkit-box-flex: 1; */
    /* -webkit-flex: 1; */
    /* flex: 1; */
    -webkit-flex: none;
  }
  /deep/ .van-dropdown-item__option--active{
    display: flex;
    justify-content: space-between;
  }
</style>
